<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">搜索:{{keyword}}</block>
		</cu-custom>
		
		<view v-if="isInit" :style="'height:'+screenHeight+'px;'">
				
				<mescroll-uni ref="mescrollRef" :fixed="false" top="0" :bottom="0"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
					
					<!-- 导航栏 begin -->
					<uniSticky>
						<view class='nav' style="position: relative;">
							<navTab ref="navTab" :tabTitle="typeList" :isFilter="isFilter" @changeTab='changeTab' @more="showTagWin"></navTab>								
						</view>
					</uniSticky>
					<!-- 导航栏 end -->
					
					<mescroll-empty v-if="emptyList"></mescroll-empty>
					
					<!-- 列表部分 begin -->
					<view class='grid col-2'>						
						<view v-for="(item,index) in list" v-if="list.length > 0" :key="index" class="padding-xs">
							<view class="cu-list menu-avatar bg-white" @tap="goScenery(item)">								
								<!-- 图片 begin -->
								<bgImg :img="item.img">
									<view class="text-white text-bold text-sm text-cut" style="width:100%;position:absolute;bottom:10rpx;left:15rpx;">										
										<text class="margin-right-xs">
											<text class="cuIcon-locationfill"></text>{{item.distance.toFixed(1)}}公里
										</text>
										{{item.area}} {{item.city}}
									</view>
								</bgImg>
								<!-- 图片 end -->
								
								<!-- 名称 begin -->
								<view class="flex align-center text-content padding-left-sm padding-right-sm text-black">
									<view class="text-cut text-bold">{{item.name}} </view>
								</view>
								<!-- 名称 end -->
								
								<!-- 简评 begin -->
								<view class="margin-top-xs padding-left-sm text-grey text-sm padding-right-sm padding-bottom-xs">
									<text class="margin-right-xs">{{item.shortDescr}}</text>
									<view v-if="item.minPrice==0" class="cu-tag radius sm light bg-green">
										免费
									</view>
									<text v-else class="text-red" style="display: inline-block;">
										<text class="text-xs">花费￥</text>{{item.minPrice}}元
									</text>
								</view>
								<!-- 简评 end -->
								
								<!-- 简评 begin -->
								<view class="flex justify-between padding-left-sm text-gray text-sm padding-right-sm padding-bottom-sm">
									<text>评分:<text :class="'text-'+item.scoreColor">{{roundFun(item.score)}}</text></text>
									<text>收藏:{{item.fav}}</text>
									<text>浏览:{{item.clickStr}}</text>																		
								</view>
								<!-- 简评 end -->
								
							</view>
						</view>						
					</view>
					<!-- 列表部分 end -->
					
				</mescroll-uni>
				
				<!-- 筛选 begin -->
				<infoWin :showModel="showModel" title="排序筛选" @closeWin="closeTagWin">
					<view slot="content">
						
						<!-- 排序 begin -->
						<view class="solid cu-bar bg-white" style="min-height: 80rpx;">
							<view class="action">
								<text class="cuIcon-title text-green"></text>
								<text>排序方式</text>
							</view>							
						</view>
						<view class="padding-lr text-left">
							
							<button @tap="changeOrder(item)" :class="'cu-btn sm margin-right margin-tb-sm '+(item.key==order?'bg-green':'lines-black')" v-for="(item,index) in orderList" :key="index">
								{{item.value}}
							</button>
						</view>
						<!-- 排序 end -->
						
						<!-- 筛选 begin -->
						<view class="solid cu-bar bg-white" style="min-height: 80rpx;">
							<view class="action">
								<text class="cuIcon-title text-blue"></text>
								<text>景点筛选</text>
							</view>
						</view>
						
						<view class="solids-bottom margin-top-sm" v-for="(item,index) in tagTree" :key="index" v-if="item.show">							
							<view class="text-bold text-left margin-left">{{item.name}}</view>
							<view class="padding-lr text-left">								
								<button v-for="(iitem,iindex) in item.children" @tap="checkTag(iitem)" :key="iindex" :class="'cu-btn sm margin-right margin-tb-sm '+(iitem.check?'bg-blue':'lines-black')">{{iitem.name}}</button>
							</view>
						</view>
						<!-- 筛选 end -->
						
					</view>
					
					<view slot="bottom" class="cu-bar bg-white flex justify-center">
						<button class="cu-btn bg-gray radius margin-lr" @tap="resetAndClose">清空</button>
						<button class="cu-btn bg-red radius  margin-lr" @tap="closeTagWin">筛选</button>
					</view>
					
				</infoWin>
				<!-- 筛选 end -->
		
		</view>
		<view class="cu-load load-modal" v-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本	
	import * as confirm from '@/common/confirm.js'
	import * as auth from '@/common/authorize.js'
	import * as util from '@/common/util.js'
	
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	import bgImg from '@/components/img-list/bg-img.vue';
	
	import bwSwiper from '@/components/bw-swiper/bw-swiper.vue'
	import navTab from '@/components/refresh/navTab.vue';
	
	import uniSticky from "@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue"
	import infoWin from "@/components/info-win/info-win"
	import searchBtn from "@/components/search/search-btn.vue"
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBody,bgImg,bwSwiper,uniSticky,navTab,infoWin,searchBtn
		},
		data() {
			return {
				customBarHeight:this.CustomBar,
				screenHeight:this.s_h_not,
				isInit:false,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据',
					},
					textNoMore:'-- 没有更多景点 --',
					toTop:{
						offset:500,
						bottom: '300rpx',
					}
				},
				keyword:'',
				list:[],
				//类型
				typeList:[],
				type:0,
				//标签
				tagTree:[],
				oriTree:[],
				tagCheck:new Set,
				//排序
				orderList:[],
				order:0,
				//其他				
				showModel:false,
				isFilter:false,
				isChange:false
			}
		},
		onLoad(option) {
			this.keyword=option.keyword
			
			let _this=this
				
			this.$api.post('/common/scenery_type/list').then(res => {
				let typeList=[{id:0,name:'推荐'},...res.data]
				this.typeList=typeList
				this.$store.commit('SET_TYPE_LIST',typeList)
			})
						
			this.$api.post('/common/tag/tree').then(res => {
				let tree=res.data.tree
				this.orderList=res.data.order
				this.order=res.data.order[0].key
				tree.forEach((item)=>{
					item.children.forEach(i=>i.check=false)
				})
				this.oriTree=tree
				this.tagTree=JSON.parse(JSON.stringify(this.oriTree));					
			})	
			
			//取得Gps权限
			auth.checkAndGetGpsAuth({
					success:()=>_this.getLocation(),
					fail:()=>{
						uni.showToast({
							title:"无法获取位置",
							icon:'error',
							mask:true
						})
						this.isInit=true
					}
			})
		},
		methods: {
			goScenery(item){
				uni.navigateTo({
					url:"/pages/scenery/detail?id="+item.id
				})
			},
			//页面数据请求事件
			upCallback(page) {
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				
				let params={
					"p":pageNum,
					"type":this.type,
					"k":this.keyword,
					"tags":Array.from(this.tagCheck),
					"o":this.order,
					"lat":this.lat,
					"lng":this.lng
				}				
				_this.$api.post('/scenery/page',params).then(res => {
					let data=res.data.data;
					
					let curPageData = data.list;
					let curPageLen=curPageData.length
					let totalSize=data.count;
					
					curPageData.forEach((item)=>{
						item.disColor=util.calColor(item.distance)
					})
					
					if(page.num == 1) _this.list = []; //如果是第一页需手动置空列表
					_this.list = _this.list.concat(curPageData); //追加新数据
											
					_this.mescroll.endBySize(curPageLen, totalSize);					
					
					this.isChange=false
					
					if(_this.isInit){
						_this.isInit=true;
					}					
				})
			},
			changeTab(index){
				let type=this.typeList[index]
				this.type=type.id
				this.list=[]
				this.$nextTick(()=>{
					this.resetTag()
					this.mescroll.resetUpScroll();
				})				
			},			
			//取得位置信息并获取初始数据
			async getLocation(){
				auth.getUserLocation().then((res)=>{
					this.lng=res.lng
					this.lat=res.lat
					this.isInit=true
				}).catch((res)=>{
					confirm.error("获取地理位置出错!")
				})			
			},
			//筛选部分
			showTagWin(){
				this.showModel=true
			},
			closeTagWin(){				
				this.showModel=false			
				
				if(this.isChange){
					this.list=[]
					this.$nextTick(()=>{
						this.mescroll.resetUpScroll();
					})
				}
			},
			resetTag(){
				this.tagTree=JSON.parse(JSON.stringify(this.oriTree));
				this.tagCheck=new Set;
				this.isFilter=false
				
				this.isChange=true
			},			
			resetAndClose(){
				this.resetTag()
				this.closeTagWin()
			},			
			checkTag(iitem){
				if(iitem.check==true){
					iitem.check=false
					this.tagCheck.delete(iitem.id)
					if(this.tagCheck.size==0){
						this.isFilter=false
					}
				}else{
					iitem.check=true					
					this.tagCheck.add(iitem.id)
					this.isFilter=true
				}
							
				this.isChange=true
			},
			changeOrder(item){
				this.order=item.key
				
				this.isChange=true
			},
			roundFun(value) {
			  return util.roundFun(value,1);
			}
		}		
	}
</script>

<style scoped>
	.nav {
		position: fixed;
		left: 0;
		top: 0;
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24upx;
		background-color: #50B7EA;
		z-index: 996;
	}
</style>